export let name = "vtEdit";
export function render() {
  //返回html的
  return `
    <style>
    /* 基础样式重置与通用设置 */
    

    /* 浮动与清除浮动工具类 */
    .left {
      float: left;
    }

    .right {
      float: right;
    }

    .clearfix::after {
      content: "";
      display: block;
      clear: both;
    }
   #content{
    background-color: #f1f4f6;
      font-weight: 500;
   }

    /* 主容器样式 */
    .total {
background-color: #fff;
      width: 100%;
      position: relative;
      min-width: 768px;
      border-radius:5px;
      padding-top:20px;
     height:800px;
     font-weight:500
      /* 防止小屏幕布局错乱 */
    }
    .total .cg{
    margin-left:20px;
    margin-bottom:10px;
    }

    /* 导航栏样式 */
    .total .nav {
      overflow: hidden;
      margin-bottom: 20px;

      /* 与下方表格分隔 */
    }
    .total .nav{
    margin-left:20px;
    }

    /* 按钮基础样式 */
    .total .nav .btn,
    .total .nav .add,
    .total .nav .copy,
    .bg .cz input {
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.2s ease;
      /* 统一过渡效果 */
      font-size: 14px;
      height: 32px;
      font-weight: 500;
    }

    /* 刷新按钮 */
    .total .nav .btn {
      margin-top: 20px;
      border: 1px solid #ccc;
      width: 32px;
    }

    .total .nav .btn:hover {
      background-color: #f5f5f5;
    }

    /* 新增按钮 */
    .total .nav .add {
      width: 100px;
      min-width: 80px;
      /* 确保按钮文字不换行 */
      margin-top: 20px;
      margin-left: 20px;
      color: aliceblue;
      background-color: #7536d0;
      border: none;
      text-align: center;
      font-size: 14px;
      padding: 0 ;

    }

    .total .nav .add:hover {
      background-color: #642bb8;
    }

    /* 当前菜单标签 */
    .total .nav .a {
      margin-left: 150px;
      margin-right:20px;
      margin-top: 20px;
      line-height: 32px;

      color:#444;
      font-size: 14px;
      /* 与按钮垂直居中对齐 */
      font-weight: 500;
    }

    /* 平台选择容器 */
    .total .nav .b {
      margin-top: 20px;
      width: 69%;
      height: 32px;
      margin-left: 10px;
      border: 1px solid #ccc;
      display: flex;
      align-items: center;
    }

    /* 复制按钮 */
    .total .nav .copy {
      margin-left: 0%;
      margin-top: 20px;
      width: 60px;
      border: none;
      color: aliceblue;
      background-color: #7536d0;
      font-weight: 400;
    }

    .total .nav .copy:hover {
      background-color: #642bb8;
    }

    /* 表格容器与表格样式 */
    .bg {
      width: 97%;
      margin-top: 20px;
      margin-left: 20px;
    }

    .bg table {
      width: 100%;
      border-collapse: collapse;
    }
    /* 表格单元格基础样式 */
        .bg table thead .id,
        .bg table thead .menu,
        .bg table thead .cz {
          height: 38px;
          border: 1px solid #f7f7f7;
          font-size: 13px;
font-weight: 500;
        }

    /* 表格单元格基础样式 */
    .bg table tbody .id,
    .bg table tbody .menu,
    .bg table tbody .cz {
      height: 48px;
      border: 1px solid #f7f7f7;
      font-size: 13px;

    }
    .bg .cz .copy{
      width: 40px;
      font-size: 12px;
      background-color: transparent;
      border: none;
      margin-left:-30px;

    }
     .bg .cz .del{
          float: left;
           width: 40px;
             background-color: transparent;
  border: none;
  color: #7536d0;
        }


    /* 表格列宽与对齐 */
    .bg .id {
      width: 5%;
      text-align: center;
      line-height: 30px;
    }

    .bg .menu {
      width: 75%;
      margin-left: 10px;
    }

    .bg .cz {
      width: 20%;
      text-align: center;
    }

    /* 表头样式 */
    .bg table thead tr {
      background-color: #f9f9f9;
    }

    .bg table thead tr .menu {
      padding-left: 10px;
    }

    /* 表格行交替色 */
    .bg table tbody tr:nth-child(odd) {
      background-color: white;
    }

    .bg table tbody tr:nth-child(even) {
      background-color: #f9f9f9;
    }

    /* 平台标签样式（d1/d2/d3） */
    .d1,
    .d2,
    .d3 {
    padding: 5px 10px;
      height: 23px;
      background-color: rgba(117, 54, 208, 0.1);
      border: 1px solid rgba(117, 54, 208, 0.7);
      border-radius: 4px;
      text-align: center;
      color: #7536d0;
      line-height: 12px;
      float: left;
      font-size: 12px;
    }

    .d1 {
      margin-left: 150px;
    }

    .d2,
    .d3 {
      margin-left: 10px;
    }

    .d4 {
      float: left;
      font-size: 14px;

      margin-left: 10px;
      line-height: 25px;
    }

    /* 分页样式 */
    .pagination {
      margin-top: 20px;
      text-align: center;
      clear: both;
      float:right;
      height: 30px;
      margin-right: 20px;
      font-size: 14px;
    }
       .pagination .page-info {
            display: inline-block;
            margin: 0 10px;
            color: #666;
            font-size: 14px;
            line-height: 30px;
          }

    .pagination button {
      padding: 5px 10px;
      margin: 0 5px;
   border:none;
      background-color: white;
      color: #7536d0;
      cursor: pointer;
      border-radius: 3px;
      transition: all 0.2s ease;
    }

    .pagination button.active {
      background-color: #7536d0;
      color: white;
    }

    .pagination button:disabled {
      border-color: #ccc;
      color: #ccc;
      cursor: not-allowed;
    }

    .pagination button:not(:disabled):hover {
      background-color: rgba(117, 54, 208, 0.1);
    }

    /* 提示框样式 */
    .active1 {
      background-color: rgba(117, 54, 204, 0.2) !important;
      width: 300px;
      height: 50px;
      position: absolute;
      right: 40%;
      color: white;
      z-index: 100;
      line-height: 50px;
      border-radius: 4px;
      animation: fadeIn 0.3s ease;
    }

    .g {
      float: left;
      font-size: 20px;
      line-height: 50px;
      width: 40px;
      margin-left: 10px;
      color: white;
    }

    .nr {
      font-size: 16px;
      line-height: 50px;
      color: white;
      float: left;
      width: 150px;
    }

    .cdn {
      width: 50px;
      height: 50px;
      color: white;
      float: right;
      margin-right: -20px;
      margin-top: -10px;
      cursor: pointer;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* 弹窗样式 */
    .nt {
      width: 700px;
      height: 680px;
      background-color: white;
      position: absolute;
      top: 150px;
      left: 650px;
      display: block;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      z-index: 10;
      transition: all 0.3s ease;
    }

    .nt .title {
      width: 100%;
      height: 40px;
      background-color: black;
      padding-top: 10px;
    }

    .nt .title .xj {
      color: aliceblue;
      font-size: 15px;
      margin-left: 10px;
      float: left;
    }

    .nt .title .cha {
      color: aliceblue;
      float: right;
      margin-right: 15px;
      font-size: 15px;
      cursor: pointer;
    }

    /* 表单样式 */
    .nn {
      width: 100%;
      height: 60px;
      background-color: white;
    }

    .nn .nn1 {
      background-color: white;
      height: 60px;
      line-height: 60px;
      float: left;
      font-size: 15px;
 /* 复制按钮 */
.total .nav .copy {
  margin-left: 0%;
  margin-top: 20px;
  width: 60px;
  border: none;
  color: aliceblue;
  background-color: #7536d0;
  /* 删除或注释此行：font-weight: 400; */
  font-weight: inherit; /* 继承全局 500 */
}
/* 复制按钮 */
.total .nav .copy {
  margin-left: 0%;
  margin-top: 20px;
  width: 60px;
  border: none;
  color: aliceblue;
  background-color: #7536d0;
  /* 删除或注释此行：font-weight: 400; */
  font-weight: inherit; /* 继承全局 500 */
}
/* 复制按钮 */
.total .nav .copy {
  margin-left: 0%;
  margin-top: 20px;
  width: 60px;
  border: none;
  color: aliceblue;
  background-color: #7536d0;
  /* 删除或注释此行：font-weight: 400; */
  font-weight: inherit; /* 继承全局 500 */
}
/* 复制按钮 */
.total .nav .copy {
  margin-left: 0%;
  margin-top: 20px;
  width: 60px;
  border: none;
  color: aliceblue;
  background-color: #7536d0;
  /* 删除或注释此行：font-weight: 400; */
  font-weight: inherit; /* 继承全局 500 */
}
/* 复制按钮 */
.total .nav .copy {
  margin-left: 0%;
  margin-top: 20px;
  width: 60px;
  border: none;
  color: aliceblue;
  background-color: #7536d0;
  /* 删除或注释此行：font-weight: 400; */
  font-weight: inherit; /* 继承全局 500 */
}
/* 复制按钮 */
.total .nav .copy {
  margin-left: 0%;
  margin-top: 20px;
  width: 60px;
  border: none;
  color: aliceblue;
  background-color: #7536d0;
  /* 删除或注释此行：font-weight: 400; */
  font-weight: inherit; /* 继承全局 500 */
}
/* 复制按钮 */
.total .nav .copy {
  margin-left: 0%;
  margin-top: 20px;
  width: 60px;
  border: none;
  color: aliceblue;
  background-color: #7536d0;
  /* 删除或注释此行：font-weight: 400; */
  font-weight: inherit; /* 继承全局 500 */
}
/* 复制按钮 */
.total .nav .copy {
  margin-left: 0%;
  margin-top: 20px;
  width: 60px;
  border: none;
  color: aliceblue;
  background-color: #7536d0;
  /* 删除或注释此行：font-weight: 400; */
  font-weight: inherit; /* 继承全局 500 */
}
/* 复制按钮 */
.total .nav .copy {
  margin-left: 0%;
  margin-top: 20px;
  width: 60px;
  border: none;
  color: aliceblue;
  background-color: #7536d0;
  /* 删除或注释此行：font-weight: 400; */
  font-weight: inherit; /* 继承全局 500 */
}
/* 复制按钮 */
.total .nav .copy {
  margin-left: 0%;
  margin-top: 20px;
  width: 60px;
  border: none;
  color: aliceblue;
  background-color: #7536d0;
  /* 删除或注释此行：font-weight: 400; */
  font-weight: inherit; /* 继承全局 500 */
}
.nn .nn1 {
  background-color: white;
  height: 60px;
  line-height: 60px;
  float: left;
  font-size: 15px;
  /* 删除或注释此行：font-weight: 400; */
  font-weight: inherit; /* 继承全局 500 */
  margin-left: 15px;
}
.nn .nn1 {
  background-color: white;
  height: 60px;
  line-height: 60px;
  float: left;
  font-size: 15px;
  /* 删除或注释此行：font-weight: 400; */
  font-weight: inherit; /* 继承全局 500 */
  margin-left: 15px;
}
/* 表格单元格基础样式 */
.bg table thead .id,
.bg table thead .menu,
.bg table thead .cz {
  height: 38px;
  border: 1px solid #f7f7f7;
  font-size: 13px; /* 修复原代码中的 "133x" 语法错误 */
  /* 删除或注释此行：font-weight: 400; */
  font-weight: inherit; /* 继承全局 500 */
}

/* 表格单元格基础样式 */
.bg table tbody .id,
.bg table tbody .menu,
.bg table tbody .cz {
  height: 48px;
  border: 1px solid #f7f7f7;
  font-size: 13px;
  /* 删除或注释此行：font-weight: 400; */
  font-weight: inherit; /* 继承全局 500 */
}
/* 表格单元格基础样式 */
.bg table thead .id,
.bg table thead .menu,
.bg table thead .cz {
  height: 38px;
  border: 1px solid #f7f7f7;
  font-size: 13px; /* 修复原代码中的 "133x" 语法错误 */
  /* 删除或注释此行：font-weight: 400; */
  font-weight: inherit; /* 继承全局 500 */
}

/* 表格单元格基础样式 */
.bg table tbody .id,
.bg table tbody .menu,
.bg table tbody .cz {
  height: 48px;
  border: 1px solid #f7f7f7;
  font-size: 13px;
  /* 删除或注释此行：font-weight: 400; */
  font-weight: inherit; /* 继承全局 500 */
}

      margin-left: 15px;
    }

    .nn .ni {
      float: left;
      margin-left: 15px;
      margin-top: 16px;
      width: 80%;
      height: 30px;
      border-radius: 4px;
      border: 1px solid #ccc;
      padding: 0 10px;
      /* 增加内边距方便输入 */
    }

    .nn .ni:focus {
      border-color: #7536d0;
      outline: none;
    }

    /* 弹窗内容区域 */
    .zj {
      margin-top: 20px;
      margin-left: 20px;
      margin-right: 20px;
      height: 530px;
      background-color: rgba(204, 204, 204, 0.2);
      padding: 20px;
    }

    .zj1 {
      width: 40%;
      height: 460px;
      float: left;
      background-color: white;
      position: relative;
    }

    .zj11 {
      width: 100%;
      height: 50px;
      position: absolute;
      bottom: 0;
      left: 0;
      text-align: center;
      line-height: 50px;
      border-top: 1px solid #ccc;
      font-size: 35px;
      cursor: alias;


    }

    .zj2 {
      width: 55%;
      height: 460px;
      float: left;
      background-color: white;
      margin-left: 20px;
      text-align: center;
      line-height: 370px;

    }
    .addn1{
    width: 100%;
    height: 33px;

    margin-top: 10px;
    }

    .addn11{
    width: 20%;
    height: 33px;
    float:left;
    font-size: 14px;
    line-height: 33px;
    margin-left: 10px;
    }
    .addn12{
    width: 60%;
    height: 33px;
    float:right;
    margin-right: 10px;
    }

    /* 响应式适配 */
    @media (max-width: 1400px) {
      .nt {
        left: 50%;
        transform: translateX(-50%);
        /* 居中显示弹窗 */
      }
    }

    @media (max-width: 992px) {
      .total .nav .a {
        margin-left: 80px;
      }

      .total .nav .b {
        width: 70%;
      }
    }
      .addm{
              width:100%;
              height:50px;
              border-bottom:1px solid blue;
              background-color: blue;
              }
              .addmm{
              float :left;
              height: 50px;

              line-height: 50px;
              color: white;
              font-size: 14px;
              width:56px;
              text-align: center;
              margin-left: 10px;
              }
              .addmn{
              float: right;
              height: 50px;

              line-height: 50px;
              color: white;
              font-size: 14px;
                  width:56px;
                  text-align: center;
                  margin-right: 10px;
              }

    @media (max-width: 768px) {
      .total {
        padding: 10px;
        min-width: auto;
      }

      .total .nav .a {
        margin-left: 20px;
      }

      .total .nav .b {
        width: 60%;
      }

      .d1 {
        margin-left: 80px;
      }

      .nt {
        width: 90%;
        height: auto;
        top: 50px;
      }
          /* 新增页码跳转样式 */
          .pagination .page-jump {
            display: inline-block;
            margin: 0 10px;
            font-size: 14px;
            float: right;

          }

          .pagination .page-jump input {

            height: 26px;
            text-align: center;
            margin: 0 5px;
            border: 1px solid #7536d0;
            border-radius: 3px;
            float: right;
          }

          .pagination .page-jump button {
            padding: 0 8px;
            height: 26px;
            float: right;
            margin: 0;
          }

    }
  </style>
  <div class="total">
    <div class='cg'> 菜单管理</div>
    <div class="nav">
      <input type="button" value="刷新" class="btn left">
      <input type="button" value="+新增菜单" class="add left">
      <div class="left a">当前菜单</div>
      <div class="b">
        <div class="d3" style="margin-left: 5px;">H5</div>
        <div class="d1" style="margin-left: 5px;">小程序</div>
        <div class="d2" style="margin-left: 5px;">111</div>
      </div>
      <input type="button" value="复制" class="copy">

    </div>
    <div class="bg">
      <table>
        <thead>
          <tr>
            <td class="id" style="width: 38px;">id</td>
            <td class="menu" style="width: 38px;">菜单名称</td>
            <td class="cz" style="width: 38px;"> 操作</td>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
    <!-- 页码容器 -->
    <div class="pagination"></div>

  </div>

  `;
}
export function afterRender() {
  // 全局变量存储所有菜单数据和当前页码
  let allMenus = [];
  let array = [];
  let currentPage = 1;
  const pageSize = 10; // 每页显示10条数据

  let total = document.querySelector(".total");
  let btn = document.querySelector(".btn");
  let add = document.querySelector(".add");
  let copy = document.querySelector(".copy");
  let tbody = document.querySelector("tbody");
  let pagination = document.querySelector(".pagination");
  let j = 200;
  function aa() {
    // 创建新提示框
    let fzcg = document.createElement("div");
    let g = document.createElement("div");
    let nr = document.createElement("div");
    let cdn = document.createElement("div");
    g.classList.add("g");
    nr.classList.add("nr");
    cdn.classList.add("cdn");
    g.innerHTML = ` &#10004;`;
    nr.innerHTML = "复制成功";
    cdn.innerHTML = "x";
    fzcg.appendChild(g);
    fzcg.appendChild(nr);
    fzcg.appendChild(cdn);
    cdn.onclick = function () {
      // 1. 从DOM中移除当前提示框
      total.removeChild(fzcg);
      // 2. 从数组中找到并删除当前提示框
      const index = array.indexOf(fzcg);
      if (index !== -1) {
        array.splice(index, 1); // 从数组中删除该元素
      }
      // 3. 重新计算剩余提示框的位置
      array.forEach((item, i) => {
        item.style.top = `${i * 60}px`; // 按新索引重新排列
      });
    };
    fzcg.classList.add("active1");
    total.appendChild(fzcg);

    // 新增：将新提示框加入数组
    array.push(fzcg);

    // 重新计算所有提示框的位置（实现堆叠效果）
    array.forEach((item, index) => {
      // 每个提示框间隔 60px（50px高度 + 10px间距）
      item.style.top = `${index * 60}px`;
    });

    // 可选：3秒后自动移除最早的提示框
    setTimeout(() => {
      if (array.length > 0) {
        let first = array.shift(); // 移除数组第一个元素
        total.removeChild(first);

        // 重新计算剩余提示框的位置
        array.forEach((item, index) => {
          item.style.top = `${index * 60}px`;
        });
      }
    }, 3000);
  }
  function bb() {
    const newId = allMenus.length > 0 ? allMenus[0].id + 1 : 1;
    const newMenu = {
      id: newId,
      name: "复制" + `\t` + "当前菜单",
    };
    allMenus.unshift(newMenu); // 添加到数据开头
    renderTable(currentPage); // 重新渲染当前页
    renderPagination(); // 重新渲染分页

    aa();
  }
  // 初始化所有菜单数据
  for (let i = 200; i > 1; i--) {
    allMenus.push({
      id: j,
      name: "复制" + `\t` + "当前菜单",
    });
    j--;
  }

  // 刷新按钮事件
  btn.onclick = function () {
    location.reload();
  };

  // 复制按钮事件（顶部复制按钮）
  copy.addEventListener("click", function () {
    bb();
  });

  // 渲染表格数据
  function renderTable(page) {
    tbody.innerHTML = ""; // 清空表格
    currentPage = page;

    // 计算当前页数据的起始和结束索引
    const startIndex = (page - 1) * pageSize;
    const endIndex = Math.min(startIndex + pageSize, allMenus.length);
    const currentData = allMenus.slice(startIndex, endIndex);

    // 渲染当前页数据
    currentData.forEach((menu) => {
      let tr = document.createElement("tr");
      let td3 = document.createElement("td");
      let td4 = document.createElement("td");
      let td5 = document.createElement("td");
      let d1 = document.createElement("div");
      let d2 = document.createElement("div");
      let d3 = document.createElement("div");
      let d4 = document.createElement("div");

      td3.innerText = menu.id;

      td5.innerHTML = `<input type="button" value="编辑" class="copy">
                          <input type="button" value="复制" class="del">`;
      d4.innerHTML = menu.name;
      d1.innerText = "H5 ";
      d2.innerText = "小程序";
      d3.innerText = "111";

      d1.classList.add("d1");
      d2.classList.add("d2");
      d3.classList.add("d3");
      d4.classList.add("d4");

      td4.appendChild(d4);

      td4.appendChild(d1);
      td4.appendChild(d2);
      td4.appendChild(d3);

      tr.appendChild(td3);
      tr.appendChild(td4);
      tr.appendChild(td5);
      tbody.appendChild(tr);

      td3.classList.add("id");
      td4.classList.add("menu");
      td5.classList.add("cz");
      let savetr = tr.outerHTML;
      localStorage.setItem("savetr", savetr);
    });

    // 为动态生成的复制按钮添加事件
    document.querySelectorAll(".del").forEach((btn) => {
      btn.addEventListener("click", function () {
        const tr = this.closest("tr");
        const id = parseInt(tr.querySelector("td:first-child").innerText);
        bb();
      });
    });
  }

  // 渲染分页控件
  function renderPagination() {
    pagination.innerHTML = ""; // 清空分页
    const totalPages = Math.ceil(allMenus.length / pageSize); // 总页数

     let pageInfo = document.createElement("span");
          pageInfo.className = "page-info";
          pageInfo.innerText = `共 ${totalPages} 页`;
          pagination.appendChild(pageInfo);



    // 上一页按钮
    let prevBtn = document.createElement("button");
    prevBtn.innerText = "<";
    prevBtn.disabled = currentPage === 1;
    prevBtn.addEventListener("click", () => {
      if (currentPage > 1) {
        renderTable(currentPage - 1);
        renderPagination();
      }
    });
    pagination.appendChild(prevBtn);

    // 页码按钮（最多显示5个页码）
    const maxPageButtons = 5;
    let startPage = Math.max(1, currentPage - Math.floor(maxPageButtons / 2));
    let endPage = Math.min(totalPages, startPage + maxPageButtons - 1);

    // 调整起始页码，确保显示足够的页码按钮
    if (endPage - startPage < maxPageButtons - 1) {
      startPage = Math.max(1, endPage - maxPageButtons + 1);
    }

    for (let i = startPage; i <= endPage; i++) {
      let pageBtn = document.createElement("button");
      pageBtn.innerText = i;
      if (i === currentPage) {
        pageBtn.classList.add("active");
      }
      pageBtn.addEventListener("click", () => {
        renderTable(i);
        renderPagination();
      });
      pagination.appendChild(pageBtn);
    }

    // 下一页按钮
    let nextBtn = document.createElement("button");
    nextBtn.innerText = ">";
    nextBtn.disabled = currentPage === totalPages || totalPages === 0;
    nextBtn.addEventListener("click", () => {
      if (currentPage < totalPages) {
        renderTable(currentPage + 1);
        renderPagination();
      }
    });
    pagination.appendChild(nextBtn);
     // 新增：页码跳转功能
            let pageJump = document.createElement("div");
            pageJump.className = "page-jump";
            pageJump.innerHTML = `
              前往
              <input type="number" min="1" max="${totalPages || 1}" value="${currentPage}">
              页
              <button>确定</button>
            `;
            pagination.appendChild(pageJump);

            // 跳转按钮事件
            const jumpInput = pageJump.querySelector("input");
            const jumpBtn = pageJump.querySelector("button");
            jumpInput.style.width = "60px";

            jumpBtn.addEventListener("click", () => {
              let targetPage = parseInt(jumpInput.value);
              // 验证页码有效性
              if (!isNaN(targetPage) && targetPage >= 1 && targetPage <= totalPages) {
                renderTable(targetPage);
                renderPagination();
              } else {
                // 输入无效时重置为当前页
                jumpInput.value = currentPage;
              }
            });

            // 支持回车键跳转
            jumpInput.addEventListener("keypress", (e) => {
              if (e.key === "Enter") {
                jumpBtn.click();
              }
            });


  }

  // 初始渲染第一页数据和分页
  renderTable(1);
  renderPagination();
  add.addEventListener("click", function () {
    let nt = document.querySelector(".nt");

    if (!nt) {
      nt = document.createElement("div");
      nt.classList.add("nt");

      let title = document.createElement("div");
      title.classList.add("title");
      title.classList.add("clearfix");

      let xj = document.createElement("div");
      let cha = document.createElement("div");
      let kd = document.createElement("div");
      xj.classList.add("xj");
      cha.classList.add("cha");
      kd.classList.add("cha");
      let nt_nav = document.createElement("div");
      nt_nav.classList.add("nn");
      let nt_nav1 = document.createElement("div");
      let nt_int = document.createElement("input");
      nt_nav.classList.add("clearfix");
      nt_nav1.classList.add("nn1");
      nt_int.classList.add("ni");
      nt_int.placeholder = "请输入菜单名称";
      let zj = document.createElement("div");
      let zj1 = document.createElement("div");
      let zj2 = document.createElement("div");

      zj.classList.add("zj");
      zj1.classList.add("zj1");
      zj2.classList.add("zj2");
     let zj11 = document.createElement("div");
      zj11.classList.add("zj11");
      zj1.appendChild(zj11);
      zj11.innerText = "+";
      zj2.innerHTML = "点击左侧菜单进行编辑操作";
let b= true
      zj11.onclick = function () {
if(b){
        zj2.innerHTML = "点击左侧菜单进行编辑操作";

      let addm = document.createElement("div");
      let addn = document.createElement("div");
      addm.classList.add("addm");
      addn.classList.add("addn");
      let addmm=document.createElement("div");
      addmm.classList.add("addmm");
      addmm.innerHTML="添加菜單";
      addm.appendChild(addmm);
      let addmn=document.createElement("div");
      addmn.classList.add("addmn");
      addmn.innerHTML="刪除菜單";
      addm.appendChild(addmn);
      zj2.innerText="";
      let addn1 = document.createElement("div");
      let addn2 = document.createElement("div");
      let addn3 = document.createElement("div");
      let addn4 = document.createElement("div");
      let addn11 = document.createElement("div");
      let addn12 = document.createElement("input");
      addn11.classList.add("addn11");
      addn12.classList.add("addn12");
      addn1.classList.add("addn1");
      addn11.innerText="菜单名称";
        addn1.appendChild(addn12);
        addn1.appendChild(addn11);
        addn.appendChild(addn1);
        addn.appendChild(addn2);
        addn.appendChild(addn3);
        addn.appendChild(addn4);


          zj2.appendChild(addm);
          zj2.appendChild(addn);
          b=false;
          }

      };



      let cz = document.createElement("div");

      xj.innerText = "新建";
      cha.innerText = "x";
      kd.innerText = "kd";
      nt_nav1.innerText = "菜单名称";

      cha.onclick = function () {
        nt.remove();
      };

      kd.onclick = function () {
        const computedStyle = window.getComputedStyle(nt);
        const currentLeft = computedStyle.left;
        if (currentLeft === "650px") {
          nt.style.width = "100%";
          nt.style.height = "100%";
          nt.style.left = "0";
          nt.style.top = "0";
        } else {
          nt.style.width = 700 + "px";
          nt.style.height = 600 + "px";
          nt.style.left = 650 + "px";
          nt.style.top = 150 + "px";
        }
      };
      total.appendChild(nt);
      nt.appendChild(title);
      title.appendChild(xj);
      title.appendChild(cha);
      title.appendChild(kd);

      nt.appendChild(nt_nav);
      nt_nav.appendChild(nt_nav1);
      nt_nav.appendChild(nt_int);

      nt.appendChild(zj);
      zj.appendChild(zj1);
      zj.appendChild(zj2);

      nt.appendChild(cz);
    }
  });
}
